/**
 * CSS3 Button Maker
 * oleh Chris Coyier
 * http://css-tricks.com
 */

*                              {margin:0;padding:0;}
*:focus                        {outline:none;border:none;}
html                           {overflow-y:scroll;}
body                           {text-align:left;font:normal 11px/14px Arial,Sans-serif;background-color:#fbfbfb;color:#333;}
pre                            {border:1px dashed #dcdcdc;background-color:#eee;padding:5px 15px;margin:10px;overflow:auto;}
#page-wrap                     {width:600px;margin:15px auto 15px;padding:50px 50px;-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.5);-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.5);box-shadow:0px 0px 3px rgba(0,0,0,0.5);-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
#page-wrap h1                  {font:normal 40px Impact,Arial,Sans-Serif;margin:0 0 40px 0;text-align:center;text-shadow:0px 1px 0px rgba(0,0,0,0.2);}
#page-wrap h2,
#page-wrap h3,
.ui-widget h2                  {margin:0px 0 7px;font-family:Impact,Arial,Sans-Serif;font-weight:normal;text-shadow:0px 1px 0px rgba(0,0,0,0.2);}
#button-box                    {position:relative;height:160px;width:50%;overflow:auto;margin-bottom:10px;background-color:#f5f5f5;float:left;-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.2);box-shadow:inset 0 0 10px rgba(0,0,0,0.2);}
#prikitiw                      {width:45%;float:right;}
#controls                      {width:50%;float:left;}
#controls .bt                  {display:block;margin:0px 0px 0px;width:100%;border-top:1px solid #666;border-bottom:1px solid #444;background-color:#555;color:#fff;font:bold 12px Arial,Sans-Serif;padding:5px 0;text-align:center;cursor:pointer;}
#controls .bt:hover            {color:#ccc;}
#controls .bt:active           {border-bottom:1px solid #666;border-top:1px solid #444;}
select                         {width:200px;margin:2px 0px 5px 15px;font:bold 11px Verdana,Arial,Sans-Serif;border:1px solid #bbb;padding:2px;background-color:#ccc;color:#333;display:block;}
option                         {border:none;}
input.teks                     {border:1px solid #bbb;background-color:#ccc;font:bold 11px Verdana,Arial,Sans-Serif;padding:1px 5px;margin-left:7px;width:120px;}
#opsi-lain table               {border:none;margin-bottom:30px;}
#opsi-lain table tr,
#opsi-lain table th,
#opsi-lain table td            {background:transparent;border:none;}

body.hitam                     {background-color:#393939;color:#ccc;}
#button-box.hitam              {background-color:#393939;}


.button {
   position:absolute;
}

/* Default style */
.button {
    cursor:pointer;
    border:1px solid #3f5691;
    background-color:#3059ab;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#2770d6', endColorstr='#3059ab');
    background-image:-webkit-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    background-image:-moz-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    background-image:-ms-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    background-image:-o-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    background-image:linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    padding:20px 40px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;
    text-shadow:0px 1px 0px rgba(0,0,0,0.3);
    color:#ffffff;
    font:normal 16px 'Century Gothic',Helvetica,Arial,Sans-Serif;
    text-decoration:none;
    outline:none;
    vertical-align:middle;
  }
.button:hover {
    border-color:#0f2852;
    background-color:#49579c;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#49579c', endColorstr='#142b70');
    background-image:-webkit-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    background-image:-moz-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    background-image:-ms-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    background-image:-o-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    background-image:linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    color:#ffffff;
  }
.button:active {
    background-color:#142b70;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#142b70', endColorstr='#49579c');
    background-image:-webkit-linear-gradient(top, #142b70, #49579c);
    background-image:-moz-linear-gradient(top, #142b70, #49579c);
    background-image:-ms-linear-gradient(top, #142b70, #49579c);
    background-image:-o-linear-gradient(top, #142b70, #49579c);
    background-image:linear-gradient(top, #142b70, #49579c);
  }
/* End default style */


.sliderBar {
   margin:7px 0 10px 0;
}

.hompi-warna       {font-size:16px;font-weight:bold;cursor:pointer;}
.ui-dialog,
#controls          {-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5);-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5);box-shadow:0px 1px 3px rgba(0,0,0,0.5);}
.ui-dialog-content {font-size:11px;}
.ui-dialog button  {-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#kode-css          {cursor:text;padding:5px 7px;margin:0px 0px;font:normal 12px Monaco,MonoSpace;background-color:#3f3f3f;color:#C2BE9E;border:5px solid #333;}
#preview-outer     {position:fixed !important;position:absolute;top:auto;right:0px;bottom:0px;left:0px;padding-top:2px;z-index:77;-webkit-box-shadow:0px -1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px -1px 2px rgba(0,0,0,0.4);box-shadow:0px -1px 2px rgba(0,0,0,0.4);display:none;}
#preview           {margin:0px 0px;border-width:0px;height:100px;background-color:#03344D;color:#ccc;font:bold 11px Arial,Sans-Serif;}
a.close            {position:fixed !important;position:absolute;top:10px;left:15px;font:bold 22px Georgia,Serif;color:red;text-decoration:none;text-shadow:0px 1px 1px rgba(0,0,0,0.4);display:none;}

#colors div {
   position:relative;
   width:100%;
   height:30px;
   margin:0 0 0 0;
}

#colors div input {
   width:70px;
   border:0;
   cursor:pointer;
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   color:transparent;
   text-indent:-9999px;
}

#colors div label {
   font:bold 11px/22px Arial,Sans-Serif;
   text-transform:uppercase;
   display:block;
   text-align:center;
   color:black;
   cursor:pointer;
   position:relative;
   z-index:20;
   color:white;
   text-shadow:0 0 8px black, 0 1px 0 black;
   top:0;
   left:0;
   width:100%;
   height:100%;
   padding-top:5px;
   position:absolute;
}

#colors div label:hover {
   font-weight:normal;
}

.colorpicker {
   z-index:9999;
}

.author         {clear:both;text-align:center;margin:30px auto 30px;font-size:10px;color:#666;}
.author a       {text-decoration:none;color:#068bc9;}
.author a:hover {text-decoration:underline;}
.clear          {clear:both;}

#custom-gradient input {
    margin:0px 5px 0px 0px;
    position:relative;
}

#howto {
   position:relative;
   z-index:777;
}

#ukuran,
#color-stop-advanced,
#opsi-lain,
#kode-css,
#howto {display:none;}
.bc-soft {margin:10px auto;width:80px;padding:20px;bottom: 100%;left: 50%;margin-top: 0px;margin-left: 535px;} 	    